@import "../constant.scss";
.Navbar-Wrapper{
    position: relative;
    height: 60px;
    width:100%;
    min-width:1280px;
    padding:0 24px;
    box-sizing: border-box;
    line-height:40px;
    border:1px solid transparent;
    display: flex;
    justify-content: space-between;
    background-color: $foregroundColor;
    color:$spanColor;
    .NavbarLeft-Wrapper{
        flex:none;
    }
    .NavbarMiddle-Wrapper{
        flex:1;
    }
    .NavbarRight-Wrapper{
        flex:none;
        cursor: pointer;
        &:hover{
            color:$mattedSpanColor;
        }
    }
}

.ThemeSelector-Wrapper{
    $themeItemWidth:15px;
    width:auto;
    position: absolute;
    bottom:0;
    right:0;
    padding:0 20px;
    .ThemeItemContainer{
        transition: width .68s ease;
        width:20px;
        height:20px;
        border:1px solid transparent;
        float:right;
        overflow: hidden;
        
    }
    
    .ThemeItem,.ThemeItem-outter,.ThemeItem-inner{
        width:$themeItemWidth;
        height:$themeItemWidth;
        box-sizing: border-box;
        background-color:pi;
        
    }
    .ThemeItem-inner{
        border-radius: 50%;
        opacity: .8;
    }
    .ThemeItem-outter{
        opacity: 1;
        float:right;
        margin:2.5px;
    }
    .ThemeItem{
        border-radius: 50%;
        opacity: .8;
        float:right;
        cursor: pointer;
        margin:2.5px;
        &:hover{
            opacity: 1;
        }
    }
    .UnfoldButton{
        &:before{
            transform: rotate(45deg); //让其中一个伪类元素旋转至右边
        }
        &:after {
            transform: rotate(-45deg); //让其中一个伪类元素旋转至右边
        }
    }
    .FoldButton{
        &:before{
            transform: rotate(-45deg); //让其中一个伪类元素旋转至右边
        }
        &:after {
            transform: rotate(45deg); //让其中一个伪类元素旋转至右边
        }
    }
    .FoldButton,.UnfoldButton{
        height:$themeItemWidth;
        width:$themeItemWidth;
        margin:3.5px;
        margin-right:1.5px;
        box-sizing: border-box;
        position: relative;
        float:right;
        border:1px solid transparent;
        &:before,&:after{
            content:"";
            height:4.5px;
            width:10px;
            position: absolute;
            top:0px;
            left: 0;
            box-sizing: border-box;
        }
        &:before {
            top:2px;
            background-color: $spanColor;
        }
        &:after {
            top:6.5px;
            background-color: $spanColor;     
        }
        &:hover::before,&:hover::after{
            background-color:$buttonHoverBackgroundColor;    
        }
    }

}